// v-nav-change指令
export default {
  mounted(el, bindings) {
    /**
     * console.log(el, bindings);
     * el: 当前挂载v-nav-change的div容器
     * bindings: {
     *   dir: {mounted: ƒ, updated: ƒ}, 
     *   instance: Proxy,
     *   //value是开发者定义的属性 如v-nav-change={value} 
     *   value: {
     *     tabClass: 'tab-item', 
     *     activeClass: 'active', 
     *     currentIndex: 2
     *   }, 
     *   oldValue: undefined, 
     *   arg: undefined,
     *   modifiers: {}
     * }
     */

    const {
      tabClass,
      activeClass,
      currentIndex
    } = bindings.value;

    //挂载静态的属性到el上
    //注意：el是mounted和updated函数所共有的引用
    el.tabClass = tabClass;
    el.activeClass = activeClass;

    //根据类名tab-item选出<a class="tab-item"></a>标签并挂载到el上
    el.oTabItems = el.getElementsByClassName(tabClass);

    //修改当前项的类名为 tab-item active
    el.oTabItems[currentIndex].className = `${tabClass} ${activeClass}`;

  },
  updated(el, bindings) {
    //获取新的动态属性
    const {
      currentIndex
    } = bindings.value;
    const oldIndex = bindings.oldValue.currentIndex;
    const {
      tabClass,
      activeClass,
      oTabItems
    } = el;

    //还原之前那一项的类名为tab-item
    oTabItems[oldIndex].className = tabClass;

    //当前新的那一项的类名为 tab-item active
    oTabItems[currentIndex].className = `${tabClass} ${activeClass}`;

  }
}